<nav> 
    <ul  id="menu-config">
        <li><a id="equipamentos">Equipmantos</a></li>
        <li><a id="usuarios">Usuarios</a></li>
        <li><a id="feriados">Feriados</a></li>    
    </ul>
</nav>
<br><br><br>
<div class="tabela">
    <table>
        <tr>            
            <th>Equipamento</th>            
            <th>Cor</th>
            <th>Disponivel</th>
            <th>Opções</th>
        </tr>        
        <tbody class="content">        
            <?php foreach ($equipamentos as $equipamento): ?>
                <!-- Linha -->
                <tr>                    
                    <!-- Coluna -->
                    <td>
                        <?php echo $equipamento['Equipamento']['nome']; ?>                    
                    </td>
                    <!-- Coluna -->
                    <td><div class="lista-cor" style="background-color: <?php echo $equipamento['Equipamento']['color']; ?>"></div></td>
                    <!-- Coluna -->
                    <td class="disponivel<?php echo $equipamento['Equipamento']['id']; ?>">
                        <?php
                        if ($equipamento['Equipamento']['excluido'] == 0):
                            echo "<span>Sim</span> <img src=\"../img/like.png\" width=\"20\">";
                        else:
                            echo "<span>Não</span> <img src=\"../img/dislike.png\" width=\"17\">";
                        endif;
                        echo "<form name='ordem'>";
                        echo "<input type='hidden' name='" . $equipamento['Equipamento']['sort'] . "' value='" . $equipamento['Equipamento']['id'] . "'>";
                        echo "</form>";
                        ?>
                    </td>
                    <!-- Coluna -->
                    <td>
                        <span class="link-editar"><input type="hidden" value="<?php echo $equipamento['Equipamento']['id']; ?>">Editar</span>
                        |
                        <span class="link-bloquear">
                            <input class="id-equipe" type="hidden" value="<?php echo $equipamento['Equipamento']['id']; ?>">
                            <input class="ex-equipe" type="hidden" value="<?php echo $equipamento['Equipamento']['excluido']; ?>">
                            <?php
                            if ($equipamento['Equipamento']['excluido'] == 0):
                                echo "<img src=\"../img/lock.png\" width=\"20\"><span>Bloquear</span>";
                            else:
                                echo "<img src=\"../img/unlock.png\" width=\"20\"><span>Desbloquear</span>";
                            endif;
                            ?>
                        </span>
                    </td>            
                </tr>            
            <?php endforeach; ?>
        </tbody>        
    </table>
</div>

<div id="add-equipamento">    
</div>
<br>
&nbsp<big>Adicionar Novo</big>
<br>
<br>
<br>
<br>

<div>
    <button id="sort-equipamento" disabled>
        Salvar Nova Ordem
    </button>
    <button id="reset-equipamento" disabled>
        Voltar Ordem
    </button>
</div>

<div id="formulario">    
</div>

<style>
    .tabela{
        width:650px;
        float:left;
    }
    .lista-cor{        
        width:10px;
        height: 10px;
        border:#000 solid 1px; 
    }
    #add-equipamento{
        background-image: url('../img/add/add01.png');
        background-size: 100%;

        width:70px;
        height: 70px;

        margin-left: 30px;
        float:left;

        cursor: pointer;
    }
    .link-editar{
        cursor: pointer;

        border: #75bdd1 double;
        padding: 2px;
        font-weight: 700;
        color: #F0F0F0;

        background: #2191c0;
    }
    .link-editar:hover{
        border: #367889 double;
        background: #75bdd1;
    }

    .link-bloquear{
        cursor: pointer;

        border: #a00 double;
        padding: 2px;
        font-weight: 600;
        color: #F0F0F0;

        background: #e52;
    }
    .link-bloquear:hover{
        border: #a00 double;
        background: lightcoral;
    }
</style>
<script>
    $(function() {
        $('#sort-equipamento').button();
        $('#reset-equipamento').button();
    });
    $(function() {
        $(".tabela tbody.content").sortable({
            stop: function() {
                $('#sort-equipamento').button('enable');
                $('#reset-equipamento').button('enable');
            }
        });
        $(".tabela tbody.content").disableSelection();
    });

    $('#sort-equipamento').bind('click', function() {
        $.ajax({
            url: '../equipamentos/ordemListar',
            data: $('form').serialize(),
            type: 'POST',
            dataType: 'html',
            success: function(response) {
                $('#resultado').html(response);
            }
        });
    });
    $('#reset-equipamento').bind('click', function() {
        window.self.location.href = '../equipamentos/listar';
    });

    $('#add-equipamento').bind('click', function() {
        $.ajax({
            dataType: "html",
            url: '/calendarioweb/equipamentos/cadastrar',
            type: 'POST',
            success: function(data) {
                $('#formulario').html(data),
                        $('#formulario').dialog({
                    title: 'Cadastro de Equipamento',
                    height: 350,
                    width: 400,
                    show: 'fade',
                    hide: 'fade',
                    draggable: false,
                    resizable: false,
                    modal: true
                });
            }
        });
    });

    $('.link-editar').bind('click', function formularioEditar() {
        $.ajax({
            dataType: "html",
            url: '/calendarioweb/equipamentos/editar/' + $(this).children().attr('value'),
            type: "POST",
            success: function(data) {
                $('#formulario').html(data),
                        $('#formulario').dialog({
                    title: 'Editar Equipamento',
                    height: 350,
                    width: 400,
                    show: 'fade',
                    hide: 'fade',
                    draggable: false,
                    resizable: false,
                    modal: true
                });
            }
        });        
    });

    $('.link-bloquear').bind('click', function formularioBloquear() {
        var urlId = $(this).children('.id-equipe').attr('value');
        var excluido = $(this).children('.ex-equipe');

        if (excluido.attr('value') == 1) {
            $(this).children('img').attr({src: '../img/lock.png'});
            $(this).children('span').text('Bloquear');
            $('.disponivel' + urlId).children('span').text('Sim');
            $('.disponivel' + urlId).children('img').attr({src: '../img/like.png', width: '20'});
            excluido.val('0');
        } else {
            $(this).children('img').attr({src: '../img/unlock.png'});
            $(this).children('span').text('Desbloquear');
            $('.disponivel' + urlId).children('span').text('Não');
            $('.disponivel' + urlId).children('img').attr({src: '../img/dislike.png', width: '17'});
            excluido.val('1');
        }
        $.ajax({
            dataType: "html",
            url: '/calendarioweb/equipamentos/bloquear/' + urlId,
            type: "GET"
        });
    });
    
    $('#equipamentos').bind('click', function() {
        window.self.location.href = '../equipamentos/listar';
    });

    $('#usuarios').bind('click', function() {
        window.self.location.href = '../usuarios/listar';
    });
    
    $('#feriados').bind('click', function() {
        window.self.location.href = '../feriados/listar';
    });


</script>